<!-- Help message -->
<div class="ui message">
  <i class="close icon"></i>

  <!-- Label config -->
  <div class="ui accordion" id="first-help">
    <div class="title"><i class="dropdown icon"></i>Labeling config help</div>
    <div class="content" style="margin-top:0; margin-left: 10px;">
      <ul class="ui list">
        <li><p>Labeling interface is based on html-like tags, read more in our
          <a href="https://labelstud.io/tags" target="_blank">documentation</a>.</p>
        </li>
        <li><p>You can fully customize the appearance and workflow by modifying Labeling Config.</p></li>
        <li><p>Tag values can use variables that start with "$" sign,
          and those correspond to the fields in imported tasks from JSON or CSV files.</p>
        </li>
      </ul>
      <div style="margin: 0.25em"></div>
    </div>
  </div>

  {% if multi_session %}
    <div class="ui accordion" id="project-management">
      <div class="title"><i class="dropdown icon"></i>Project management</div>
      <div class="content collapse" style="margin-left: 25px; margin-top:0px">
        <p>You can create multiple projects within one browser session.
          If you don't want to loose your project, just save the shared link in the safety place.
          If you want to share the project with somebody, send him or her a shared link.</p>

        <button onclick="new_project()" id="new-project-button" class="ui button negative basic"
                style="height: 24px; padding-top: 5px;">
          Start new project
        </button>

        <div style="margin-bottom: 15px!important;"></div>
        <div> Current project: {{ project.description }} </div>

        <div style="margin-top: 10px!important;"></div>
        <div style="padding-left: 10px">
            <style>.ui.item:hover i { color: darkorange!important; }</style>

            {% for uuid, desc in own_projects.items() %}
              <div class="ui item">
                <i class="share alternate icon blue small hover-button"
                   data-tippy-content="Copy shared link to project with uuid<br>{{ uuid }}"
                   onclick="copy_share_link('{{ uuid }}')"></i>
                <a id="myLink" href="#" onclick="switch_project('{{ uuid }}', '{{ desc }}')" data-value="{{ uuid }}"
                   style="font-weight: {% if uuid == project.uuid %}bold{% else %}normal{% endif %}">
                  {{ desc }}</a>
              </div>
            {% endfor %}

        </div>

        <div style="margin-bottom: 15px!important;"></div>
        <div>Shared projects with you</div>

        <div style="margin-bottom: 15px!important;"></div>
        <div style="padding-left: 10px">
          {% if shared_projects %}

              <table>
                {% for uuid, desc in shared_projects.items() %}
                  <div class="ui item">
                    <i class="share alternate icon blue small hover-button"
                       data-tippy-content="Copy shared link to project with uuid<br>{{ uuid }}"
                       onclick="copy_share_link('{{ uuid }}')"></i>
                    <a id="myLink" href="#" onclick="switch_project('{{ uuid }}', '{{ desc }}')" data-value="{{ uuid }}"
                       style="font-weight: {% if uuid == project.uuid %}bold{% else %}normal{% endif %}">
                      {{ desc }}</a>
                  </div>
                {% endfor %}
              </table>

          {% else %}
            <p>You can add a shared project here if you open a shared link from the other user</p>
          {% endif %}
        </div>
        <div style="margin-top: 10px!important;"></div>
      </div> <!-- accordion -->
    </div>
  {% endif %}

  {% with template_mode="titles" %}
    {% include 'includes/setup_templates.html' %}
  {% endwith %}
</div>

<br/>

<script>
  function new_project() {
    var project_desc = prompt("Do you want to create a new project?\n\n" +
      "If yes, please enter a new project title", "default");
    if (project_desc) {
      var request = new XMLHttpRequest();
      request.open("POST", 'api/project/?new=true&desc=' + project_desc, true);
      request.onload = function () {
        window.location.reload();
      };
      request.send(null);
    }
  }

  function switch_project(uuid, desc) {
    var request = new XMLHttpRequest();
    request.open("POST", '/api/project-switch?uuid=' + uuid, true);
    request.onload = function () {
      window.location = "/setup"
    };
    request.send(null);
  }

  function copy_share_link(uuid) {
    copyToClipboard(window.location.origin + '/api/project-switch?uuid=' + uuid);
    $('body').toast({
      class: 'orange',
      title: 'Copied!',
      message: '<pre>Link to the project is copied to clipboard<br><br>Project uuid:<br>' + uuid + '</pre>',
      position: 'bottom center'
    })
  }

  $('.ui .accordion').accordion({collapsible: true});

  // project management state save to/load from cookies
  function process_accordion_state(element_id, default_state) {
    var element = $(element_id);
    element.find('.title').on('click', function (event) {
      Cookies.set(element_id + '-state', !$(event.target).hasClass('active'));
      console.log('click', element_id);
    });
    if (Cookies.get(element_id + '-state', default_state) === 'true') {
      element.find('.title').addClass('active');
      element.find('.content').addClass('active');
      console.log('load', element_id);
    }
  }

  process_accordion_state('#first-help', 'true');
  process_accordion_state('#project-management', 'false');
  process_accordion_state('#basic-templates', 'true');
  process_accordion_state('#adv-templates', 'false');
</script>
